<template>
	<view class="content">
		<view class="top flexs2">
			<image class="logo" src="../../static/logo.png"></image>
		</view>
		<view class="cons">
			<view class="cons_top">
				<view class="cons_topa bg-white">
					<view class="list flexs1">
						<image class="icon_img" src="../../static/img/shouji.png"></image>
						<view class="ipts">
							<input placeholder="请输入" class="ipts1" v-model="phone"/>
						</view>
					</view>
					<view class="list flexs1">
						<image class="icon_img" src="../../static/img/codes.png"></image>
						<view class="ipts flexs1">
							<input placeholder="输入验证码" class="ipts2" v-model="codes"/>
							<view class="small" v-show='stus == true' @click='code'>{{text}}</view>
							<view class='small text-gray' v-show='stus == false'>{{text}}S重新获取</view>
						</view>
					</view>
				</view>
				<view class="btns text-white text-bold text-center" @click="gologin">绑定手机号</view>
			</view>
		</view>
	</view>
</template>

<script>
	// let jweixin = require('jweixin-module')  
	export default {
		data() {
			return {
				sunmax: 60,
				stus: true, //倒计时标识
				phone:'',
				codes:'',
				text: '发送验证码',
				openid:'1',
				nickname:'1',
				avatar:'1',
				token:'',
				uid:'',
			}
		},
		onLoad(option) {
			var that = this;
			that.openid = option.openid;
			that.nickname = option.nickname;
			that.avatar = option.avatar;
			// if(option.avatar){
				//http://thirdwx.qlogo.cn/mmopen/vi_32/4hmwVUMN3mdMHnUPEmxBdpbxWqMTYFIHK9ib2GefzzDH3FFJj0d99gm88jibFIrgDdFLvNUDQPFyvaEegee3iat0w/132
								//blob:http://drycleaner.xzjumeng.com/11227b6e-8f54-4653-a45b-49e8661328d7222222222222222
				// http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTl5eicXFWltiaFyvsFRrv27GhvHpRGdxxShd0cW9fPX6z1JlMHxPDVwAED09PsicW7MlhXeDKlDh8NTw/123
				// uni.downloadFile({
				//      url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/61BNy5C06ezrIwQib7W37ibGiawEGaJJAn0Yxibep6YibJ0yovhlTkDkna9scTkdGfg3ujs3pWPPGn9ry0ww64NXHicw/132',
				//      success: function (image) {
				// 		 that.$api.msg(image.tempFilePath);
				// 		 console.log(image.tempFilePath)
				// 		 that.imgs = image.tempFilePath
				//       uni.uploadFile({//该上传仅为示例,可根据自己业务修改或封装,注意:统一上传可能会导致服务器压力过大
				//        url: that.$common.baseUrl + '/api/common/upload',
				//        files: '',//有files数组时,会忽略filePath和name
				//        filePath: image.tempFilePath,
				//        name: 'file',
				//        enctype: "multipart/form-data",
				//        formData: {}, //额外参数
				//        success: (uploadFileRes) => {
				//           // that.wxavater = JSON.parse(uploadFileRes.data).data.url;
				// 		  // that.$api.msg(that.wxavater);
				//        },
				//        fail: (e) => {
				//           that.$api.msg('图片上传失败')
				//        }
				//       });
				//      }
				// });
			// }
		},
		methods: {
			gologin(){
				var obj = {
					mobile: this.phone,
					captcha: this.codes,
					openid: this.openid,
					nickname: this.nickname,
					avatar: this.avatar
				}
				this.$common.requests('/api/user/mobilelogin', obj).then(res => {
					this.$api.msg(res.data.msg);
					if(res.data.code==1){
						var data = res.data.data.userinfo;
						uni.setStorageSync('uid', data.user_id);
						uni.setStorageSync('token', data.token);
						uni.setStorageSync('userinfo', data);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800);
					}
				})
			},
			//获取验证码
			code() {
				if ((/^1[345789]\d{9}$/.test(this.phone))) {
					this.stus = false;
					this.text = this.sunmax;
					let timeInt = setInterval(() => {
						this.text--
						if (this.text <= 0) {
							this.stus = true;
							this.text = '获取验证码';
							clearInterval(timeInt)
						}
					}, 1000)
					var obj = {
						mobile: this.phone
					}
					this.$common.requests('/api/user/sendSMS', obj).then(res => {
						this.$api.msg(res.data.msg);
					})
				} else {
					this.$api.msg('请输入正确的手机号');
				}
			},
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
	}
	.top{
		width: 100%;
		height: 32vh;
		background: #14C7CE;
	}
	.logo{
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		margin-bottom: 50upx;
	}
	.cons{
		width: 100%;
		height: 50vh;
		position: relative;
		top: -7vh;
		left: 0;
	}
	.cons_top{
		padding: 0 30upx 60upx 30upx;
		position: relative;
		top: 0;
		left: 0;
	}
	.cons_topa{
		width: 100%;
		padding: 50upx;
		height: 400upx;
		border-radius: 20upx;
	}
	.icon_img{
		width: 28upx;
		height: 38upx;
	}
	.ipts{
		width: 85%;
		padding: 30upx 0;
		border-bottom: 1px solid #E6E6E6;
	}
	.ipts1{
		width: 100%;
		padding-top: 3upx;
	}
	.ipts2{
		width: 60%;
		padding-top: 3upx;
	}
	.small{
		font-size: 28upx;
	}
	.btns{
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		position: absolute;
		border-radius: 15upx;
		bottom: 0;
		left: 12%;
		font-size: 30upx;
	}
	.bots{
		text-align: center;
	}
	.small1{
		font-size: 26upx;padding: 50upx 0;
	}
	.denglu{
		padding: 60upx 0 50upx 0;
	}
	.weixin{
		width: 60upx;
		height: 50upx;
	}
</style>
